<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello world</title>
    <!-- 1.引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2.引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="All"></div>
    <style>
      #All {
        color: red;
      }
      #All li {
        color: #000;
      }
    </style>
    <script>
      // 3. 创建React元素
      /*
       * <div class='item'>
          <h2 class='title'>中奖列表</h2>
          <ul class='list'>
            <li>1. 张三</li>
            <li>2. 张三</li>
            <li>3. 张三</li>
          </ul>
       </div>
       */
      let item = React.createElement(
        'div',
        {
          className: 'item',
          title: '列表',
        },
        React.createElement(
          'h3',
          { className: 'title' },
          '书籍',
          React.createElement(
            'ul',
            { className: 'list' },
            React.createElement('li', null, '1.西游记'),
            React.createElement(
              'li',
              {
                onClick: function () {
                  alert('55555')
                },
              },
              '2.水浒传',
            ),
            React.createElement('li', null, '3.三国演戏'),
          ),
        ),
      )
      // 4.创建根节点（挂载点）
      let root = ReactDOM.createRoot(document.getElementById('All'))
      // 5.渲染元素到页面中
      root.render(item)
      /*
       *创建react元素 总结：
       *1.元素名称小写
       * 2.元素属性 class->className
       *如果元素没有属性写为null
       */
    </script>
  </head>
  <body></body>
</html>
